<template>
  <!-- 我的采购 -->
  <view class="content">
    <view class="input">
      <uni-search-bar placeholder="请输入商品名称" style="font-size: 14px" v-model.trim="form.Article_Name" @blur="rake"  @clear="rake">
      </uni-search-bar>
    </view>
	<view v-if="tableData.length == 0" class="cont  justify-center  flex align-center zanw mt-10" style="height: 100vh;">
		<text>
			暂无更多数据
		</text>
	</view>
    <view v-else class="cont">
      <view class="item" v-for="(row, i) in tableData" :key="i">
        <view class="name">{{ row.Article_Name }}</view>
        <view class="title">
          <view class="right">
            <view>{{ row.Contacts }}</view>
            <view>￥{{ row.Amount }}</view>
            <view>{{ row.Enterprise_Name }}</view>
          </view>
          <view class="right con">
            <view><text>起步量:</text>{{ row.Starting_Quantity
            }}{{ row.Unit }}</view>
            <view><text>已收购量:</text>{{ row.Acquisition_Quantity
            }}{{ row.Unit }}</view>
            <view><text>剩余需求量:</text>{{ row.Residue_Quantity
            }}{{ row.Unit }}</view>
          </view>
        </view>
        <view class="diz" @click="
          handleTabs(
            '/pages/My/My_Order/More_procurement?Enterprise_Info_SerialNumber=' +
            row.Enterprise_Info_SerialNumber +
            '&Group_Seek_Purchase_SerialNumber=' +
            row.Group_Seek_Purchase_SerialNumber
          )
          ">查看更多 <uni-icons type="right" size="20"></uni-icons></view>
        <view class="button">
          <!-- <button>发布</button> -->
          <button @click="handleTabs(
            '/pages/My/My_Order/More_procurement?Enterprise_Info_SerialNumber=' +
            row.Enterprise_Info_SerialNumber +
            '&Group_Seek_Purchase_SerialNumber='
          )">
            申请记录
          </button>
        </view>
      </view>
      <!-- 下拉提示 -->
      <view class="text-center py-2">
        <text>{{ BottomFont }}</text>
        <uni-icons v-if="BottomFont == '加载中...'" type="spinner-cycle"></uni-icons>
      </view>
      <view v-if="tag" @click="goTop" class="bg-white flex align-center justify-center" style="
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.5);
        position: fixed;
        bottom: 150rpx;
        right: 50rpx;
      ">
        <image style="width: 80%; height: 80%" src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
      </view>
      <!--下拉提示  -->

      <!-- <button>查询</button> -->
    </view>
  </view>
</template>

<script>
import {
  GroupSeekProcureAllAction,
  GroupProcureAllAction,
  GroupProcureAll,
} from "@/api/group.js";
export default {
  name: "wdcg",
  data() {
    return {
      activeIndex: 0,
      total: 0,
      BottomFont: "下拉获取更多",
      num: 0,
      tag: false,
      category: [
        //用户专区分类筛选
        "全部",
        "待对方审核",
        "待付款",
        "待确认收货",
        "交易成功",
      ],
      form: {
        Enterprise_Info_SerialNumber: uni.getStorageSync("enterprise"),
        Article_Name: "",
        Type: "1",
        page: 1, //页数
        limit: 5, //每页数据条数
      },
      tableData: [

      ],

    };
  },
  onReachBottom() {
    this.tag = true;
    //触底事件
    if (this.num != this.total) {
      //如果未超过所有数则调用请求
      this.form.page++;
      this.getList(this.form);
    } else {
      //反之改变底部字体
      this.BottomFont = "已经到底了";
    }
  },
  methods: {
    rake() {
      this.tableData = [];
      this.getList(this.form);
    },
    async SwitchVariety(i, index) {
      this.goTop();
      this.num = 0;
      this.form.page = 1;
      this.getList(this.form);
      this.tableData = [];
      this.activeIndex = index;
    },
    async getList(data) {
      //分页查询所有采购数据
      uni.showLoading({
        title: "加载中...",
      });
      this.BottomFont = "加载中...";
      const res = await GroupSeekProcureAllAction({
        data,
      });
      console.log(res);
      if (
        (res.redirect && res.redirect == "REDIRECT") ||
        res.REDIRECT == "REDIRECT"
      ) {
        uni.navigateTo({
          url: "/pages/My/Login",
        });
      } else if (res.Status == "success") {
        this.tableData.push(...res.tableData);
        console.log(this.tableData);
        this.total = Number(res.limit);
        uni.hideLoading();
        this.num = this.tableData.length;
        if (this.num == this.total || this.num >= this.total) {
          this.BottomFont = "已经到底了";
        } else {
          this.BottomFont = "下拉加载更多";
        }
      }
    },
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    goTop() {
      //返回顶部
      uni.pageScrollTo({
        scrollTop: 0,
      });
      this.tag = false;
    },
  },
  mounted() {
    this.getList(this.form);
    // this.getData(this.form1);
  },
};
</script>

<style lang="scss">
.content {
  background-color: #f5f5f5;
  width: 100%;
  padding-bottom: 100rpx;

  .nav {
    height: 88rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;

    // font-weight: bold;
    view {
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      padding: 10rpx;
      box-sizing: border-box;
    }

    .active {
      border-bottom: 3px solid #28a745;
      font-size: 30rpx;
    }
  }

  .cont {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .item {
      border-radius: 20rpx;
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      margin: 0 0 30rpx 0;

      .name {
        padding: 20rpx;
        border-bottom: 1px solid #f5f5f5;
      }

      .title {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;

        .right {
          width: 30%;
          height: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: flex-start;
          font-size: 24rpx;

          view {
            text-align: right;
          }
        }

        .con {
          width: 70%;
          align-items: flex-end;
        }
      }

      .diz {
        border-top: 1px solid #f5f5f5;
        padding: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .input {
    // height: 40rpx;
    border-radius: 20rpx;
    background-color: #fff;
    // padding: 20rpx;
    box-sizing: border-box;
    // margin: 0 0 30rpx 0;
  }

  .button {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    box-sizing: border-box;

    button {
      font-size: 32rpx;
      text-align: center;
      line-height: 32rpx;
      display: block;
      padding: 24rpx 0;
      background: #28a745;
      color: #fff;
      width: 320rpx;
      margin: 0 20rpx;
      font-size: 24rpx;
    }

    .cal {
      background-color: #f39147;
    }
  }
}
</style>
